AllLiveMixesMusicLo-fiElectric guitarIndie MusicJavaScriptGamingAcoustic guitarAlternative RockBrazilian Hip HopAmbient MusicCampingRainComputersPodcastsSoul MusicRecently uploadedWatchedNew to you
If playback doesn't begin shortly, try restarting your device.
CSS Variables & General CSS Styles
5 seconds
Pull up for precise seeking
Testimonials Component CSS
2:27:41
4:27:52
You're signed out
Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website
Hostinger Discount: https://www.hostg.xyz/SH8cs
Responsive React Portfolio Website with Theme Customization (FULL COURSE): https://www.udemy.com/course/react-js...
Source Code, Assets & Live Demo: https://www.buymeacoffee.com/egator/e...
Become a patron: https://patreon.com/egator
In this practical react js project tutorial, I'm going to teach you, step-by-step, how to create and deploy a fully responsive personal portfolio website from scratch! By the end of this video, you will know how to create a react app from scratch, how to use the react icons library in your react projects, how to use react useState hooks, how to build modern website designs with CSS3, how to use SwiperJS (to create carousels/slides) in your react projects, how to add multiple contact options on your website (WhatsApp, Facebook Messenger, and Direct form submission using EmailJS), and more!
No prior react knowledge is required for this tutorial, as I will be explaining every step along the way.
Now Let's Build The Best React Personal Portfolio Website On YouTube!
Assets: https://drive.google.com/file/d/18FpI...
Timestamps
00:00:00 Intro (Project Overview)
00:08:43 Buying Hosting & Claiming Free Domain on Hostinger
00:11:38 Installing Node & VSCode
00:12:21 Assets
00:12:56 Creating our React App using npx create-react-app
00:14:22 Managing and Creating files & folders
00:20:15 Creating all Components
00:27:40 CSS Variables & General CSS Styles
00:45:00 Header Component JSX
00:52:42 Installing React Icons and Using them in our project
00:56:18 Header Component CSS
01:04:20 Header Component Responsive Design
01:06:45 Floating Nav Component JSX
01:13:57 Floating Nav Component CSS
01:18:00 Managing Nav States using useState Hook
01:21:43 About Component JSX
01:28:29 About Component CSS
01:35:15 About Component Responsive Design
01:38:45 Experience Component JSX
01:44:17 Experience Component CSS
01:50:40 Experience Component Responsive Design
01:53:35 Services Component JSX
01:57:25 Services Component CSS
02:02:35 Services Component Responsive Design
02:04:15 Portfolio Component JSX
02:10:10 Portfolio Component CSS
02:14:45 Portfolio Component Responsive Design
02:16:02 Generating Portfolio Items from Array using map method
02:20:44 Testimonials Component JSX
02:24:03 Testimonials Component CSS
02:29:15 Testimonials Component Responsive Design
02:30:26 Generating Testimonials from Array using map method
02:33:40 Creating Carousel/Slides using SwiperJS
02:40:23 Contact Component JSX (Multiple contact options: Facebook Messenger, WhatsApp & Email)
02:51:02 Contact Component CSS
02:57:02 Contact Component Responsive Design
02:58:34 Form Submission using EmailJS
03:07:43 Footer Component JSX
03:11:53 Footer Component CSS
03:16:30 Footer Component Responsive Design
03:18:50 Deploying Our React Website
#reactjs#reactportfoliowebsite#reactjsprojects
React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website
Hostinger Discount: https://www.hostg.xyz/SH8cs…Show more
React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website
Hostinger Discount: https://www.hostg.xyz/SH8cs
Responsive React Portfolio Website with Theme Customization (FULL COURSE): https://www.udemy.com/course/react-js...
Source Code, Assets & Live Demo: https://www.buymeacoffee.com/egator/e...
Become a patron: https://patreon.com/egator
In this practical react js project tutorial, I'm going to teach you, step-by-step, how to create and deploy a fully responsive personal portfolio website from scratch! By the end of this video, you will know how to create a react app from scratch, how to use the react icons library in your react projects, how to use react useState hooks, how to build modern website designs with CSS3, how to use SwiperJS (to create carousels/slides) in your react projects, how to add multiple contact options on your website (WhatsApp, Facebook Messenger, and Direct form submission using EmailJS), and more!
No prior react knowledge is required for this tutorial, as I will be explaining every step along the way.
Now Let's Build The Best React Personal Portfolio Website On YouTube!
Assets: https://drive.google.com/file/d/18FpI...
Timestamps
00:00:00 Intro (Project Overview)
00:08:43 Buying Hosting & Claiming Free Domain on Hostinger
00:11:38 Installing Node & VSCode
00:12:21 Assets
00:12:56 Creating our React App using npx create-react-app
00:14:22 Managing and Creating files & folders
00:20:15 Creating all Components
00:27:40 CSS Variables & General CSS Styles
00:45:00 Header Component JSX
00:52:42 Installing React Icons and Using them in our project
00:56:18 Header Component CSS
01:04:20 Header Component Responsive Design
01:06:45 Floating Nav Component JSX
01:13:57 Floating Nav Component CSS
01:18:00 Managing Nav States using useState Hook
01:21:43 About Component JSX
01:28:29 About Component CSS
01:35:15 About Component Responsive Design
01:38:45 Experience Component JSX
01:44:17 Experience Component CSS
01:50:40 Experience Component Responsive Design
01:53:35 Services Component JSX
01:57:25 Services Component CSS
02:02:35 Services Component Responsive Design
02:04:15 Portfolio Component JSX
02:10:10 Portfolio Component CSS
02:14:45 Portfolio Component Responsive Design
02:16:02 Generating Portfolio Items from Array using map method
02:20:44 Testimonials Component JSX
02:24:03 Testimonials Component CSS
02:29:15 Testimonials Component Responsive Design
02:30:26 Generating Testimonials from Array using map method
02:33:40 Creating Carousel/Slides using SwiperJS
02:40:23 Contact Component JSX (Multiple contact options: Facebook Messenger, WhatsApp & Email)
02:51:02 Contact Component CSS
02:57:02 Contact Component Responsive Design
02:58:34 Form Submission using EmailJS
03:07:43 Footer Component JSX
03:11:53 Footer Component CSS
03:16:30 Footer Component Responsive Design
03:18:50 Deploying Our React Website
#reactjs#reactportfoliowebsite#reactjsprojects
This absolutely brilliant tutorial didn't miss anything. Really helped me understand CSS and how to make my own customizations. Great learning resource! Thank you!
I cannot thank you enough! This was such an amazing tutorial from start to finish. I was afraid of react but after this tutorial I can say I'm so much confident! Thank you again!
This was such a pleasure to follow. You explain a lot of the HTML and general structure of the code. Learned a lot about CSS conventions and styling as well. I followed the entire tutorial, and now I'm excited to learn more and build upon this and make it my own. Thank you for the amazing tutorial!
sheer pleasure, I am speechless, this has to be by far the most intuitive and informative course on react I have ever seen, thanks for breaking things down and making such a wonderful video, you have gained a lifetime subscriber I look forward to go through all the other courses that you offer. #you are a great teacher, keep it up and thanks once again.
I appreciate you for making this video! Hoping to use this as the framework for my own portfolio with some personalized tweaks, plus this doubles as some excellent react training! Keep up the great content
This is one of those videos that I was able to watch and learn without needing stop because of complicated errors. I was able to make my first full stylized website thanks to you . I appreciate your work and Thank you so much ️️
Well I can't thank you enough. My version of this sleek, modern portfolio site is up and running. This is a big milestone for me and likely every future-dev out there. I won't forget who helped along the way. My hats is off sir.
Great tutorial - am halfway through Will tweak this with different colours and images to make it fit my portfolio. Thanks for the great effort and time you’ve put in to this tutorial. ️
Great tutorial! Really loved it! One suggestion: in the experience element, we can create a separate react component for the Article and pass the skill name and skill level as props. This will reduce the repetitions a lot!
Thank you man. Wow, I always wanted to learn front-end development and I definitely learned a lot throughout the whole build!! Thanks to you I built my first site ;) Cheers and thank you for all the effort that you are putting in your videos. Simply awesome brother <3
You're amazing just I wanted to say. Your file structure, way of teaching the concepts are really as good as a professional instructor's even better all of them. Thank you
Super tutorial for react beginners like me. This is a complete package for learning react as well as css. First react tutorial where css is also taken care properly. Everything is perfect and mastered, the way you explain things is next level... hats off to you man..! Learnt a lot from this tutoral. Huge ton of thanks!
I've been watching Youtube tutorials for like last 3 month and the only tutorial i found in which the tutor explains the CSS and does not copy it from somewhere is this video . CSS is a very underrated factor in front-end development no one cares about.
Thanks sir for this good tutorial and LOVE when you say C'mon after every Typo LUL
Thank you so much for this fantastic video. I learnt a lot about css and react. Much more than my teacher learnt me in months. Keep up the good work. This was really helpful. So grateful
This is an amazing tutorial! I've already completed two other tutorials from you! Thank you for making such great videos. I've one quick question regarding the active nav bar. How would you make nav icon active as I scroll through the section? It seems like the nav icon is set to active only when it is clicked. I'd really appreciate if you can suggest on this. Thank you again!
For anyone getting the error of having text of component names not showing up "Header" "Nav" etc. around 27:00 make sure you File >> Save All and text should then appear.
React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website
Hostinger Discount: https://www.hostg.xyz/SH8cs
Responsive React Portfolio Website with Theme Customization (FULL COURSE): https://www.udemy.com/course/react-js...
Source Code, Assets & Live Demo: https://www.buymeacoffee.com/egator/e...
Become a patron: https://patreon.com/egator
In this practical react js project tutorial, I'm going to teach you, step-by-step, how to create and deploy a fully responsive personal portfolio website from scratch! By the end of this video, you will know how to create a react app from scratch, how to use the react icons library in your react projects, how to use react useState hooks, how to build modern website designs with CSS3, how to use SwiperJS (to create carousels/slides) in your react projects, how to add multiple contact options on your website (WhatsApp, Facebook Messenger, and Direct form submission using EmailJS), and more!
No prior react knowledge is required for this tutorial, as I will be explaining every step along the way.
Now Let's Build The Best React Personal Portfolio Website On YouTube!
Assets: https://drive.google.com/file/d/18FpI...
Timestamps
00:00:00 Intro (Project Overview)
00:08:43 Buying Hosting & Claiming Free Domain on Hostinger
00:11:38 Installing Node & VSCode
00:12:21 Assets
00:12:56 Creating our React App using npx create-react-app
00:14:22 Managing and Creating files & folders
00:20:15 Creating all Components
00:27:40 CSS Variables & General CSS Styles
00:45:00 Header Component JSX
00:52:42 Installing React Icons and Using them in our project
00:56:18 Header Component CSS
01:04:20 Header Component Responsive Design
01:06:45 Floating Nav Component JSX
01:13:57 Floating Nav Component CSS
01:18:00 Managing Nav States using useState Hook
01:21:43 About Component JSX
01:28:29 About Component CSS
01:35:15 About Component Responsive Design
01:38:45 Experience Component JSX
01:44:17 Experience Component CSS
01:50:40 Experience Component Responsive Design
01:53:35 Services Component JSX
01:57:25 Services Component CSS
02:02:35 Services Component Responsive Design
02:04:15 Portfolio Component JSX
02:10:10 Portfolio Component CSS
02:14:45 Portfolio Component Responsive Design
02:16:02 Generating Portfolio Items from Array using map method
02:20:44 Testimonials Component JSX
02:24:03 Testimonials Component CSS
02:29:15 Testimonials Component Responsive Design
02:30:26 Generating Testimonials from Array using map method
02:33:40 Creating Carousel/Slides using SwiperJS
02:40:23 Contact Component JSX (Multiple contact options: Facebook Messenger, WhatsApp & Email)
02:51:02 Contact Component CSS
02:57:02 Contact Component Responsive Design
02:58:34 Form Submission using EmailJS
03:07:43 Footer Component JSX
03:11:53 Footer Component CSS
03:16:30 Footer Component Responsive Design
03:18:50 Deploying Our React Website
#reactjs#reactportfoliowebsite#reactjsprojects